<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-form-item label="子模块名称">
				<el-input v-model="dataForm.name" placeholder="请输入内容" clearable></el-input>
			</el-form-item>
			<el-form-item >
				<el-button @click="dataSearch()" type="primary" round icon="el-icon-search">查询</el-button>
				<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(true)">新增</el-button>
				<el-button type="warning" icon="el-icon-edit" @click="addOrUpdateHandle(false)" :disabled="dataListSelections.length <= 0">修改</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">删除</el-button>
			</el-form-item>
			<el-popover placement="top-start" trigger="hover" content="子模块客户资料，只能绑定在主客户资料上。如需查看子模块客户资料，请到【客户资料管理】模块中查看">
				<span class="el-icon-question" slot="reference"></span>
			</el-popover>
		</el-form>

		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
			<el-table-column type="selection" header-align="center" align="center" width="50" label="选择">
			</el-table-column>
			<el-table-column prop="name" header-align="center" align="center" label="模块名称">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.name" trigger="hover">
						<span slot="reference">{{scope.row.name}}</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="ext1" header-align="center" align="center" label="字段1">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.ext1" trigger="hover">
						<span slot="reference">{{scope.row.ext1}}</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="ext2" header-align="center" align="center" label="字段2">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.ext2" trigger="hover">
						<span slot="reference">{{scope.row.ext2}}</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="ext3" header-align="center" align="center" label="字段3">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.ext1" trigger="hover">
						<span slot="reference">{{scope.row.ext3}}</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="ext4" header-align="center" align="center" label="字段4">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.ext1" trigger="hover">
						<span slot="reference">{{scope.row.ext4}}</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="ext5" header-align="center" align="center" label="字段5">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.ext1" trigger="hover">
						<span slot="reference">{{scope.row.ext5}}</span>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
				<template slot-scope="scope">
					<i class="el-icon-time"></i> {{ scope.row.createTime |formatDateTime }}
				</template>
			</el-table-column>
			<el-table-column prop="createUserName" header-align="center" align="center" label="创建人">
				<template slot-scope="scope">
					<el-popover placement="right" :content="scope.row.createUserName" trigger="hover">
						<span slot="reference">{{scope.row.createUserName}}</span>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
	</div>
</template>
<script>
	import dateUtil from '@/utils/dateUtil'
	import AddOrUpdate from './cc-customer-sub-config-add-or-update'
	export default {
		data() {
			return {
				dataForm: {
					keyword: '',
					searchTime: [],
					otherFlag:'',
				},
				dataList: [],
				dataListLoading: false,
				dataListSelections: [],
				page: 1,
				limit: 10,
				totalPage: 0,
				id: '',
			}
		},
		components: {
			AddOrUpdate,
		},
		created() {
			this.getDataList()
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			}
		},
		methods: {
			dataSearch(){
				this.page = 1
				this.getDataList()
			},
			// 获取数据列表
			getDataList() {
				var that = this
				this.dataListLoading = true
				this.$http.post('/cc/customer/sub/config/pageList', {
					page: that.page,
					limit: that.limit,
					name: that.dataForm.name,
				}).then(resp => {
					console.log("获取子模块数据列表==>",resp.data.data)
					that.dataList = resp.data.data;
					that.totalPage = resp.data.count
					that.dataListLoading = false
				})
			},
			channelChange(val){
				
			},
			// 每页数
			sizeChangeHandle(val) {
				this.limit = val
				this.page = 1
				this.getDataList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.page = val
				this.getDataList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},
			// 新增 / 修改,
			addOrUpdateHandle(val) {
				if(val) {
					if(this.dataList.length >= 2){
						this.$message({
							message: '一个租户下最多只能有两个客户资料子模块',
							type: 'warning'
						})
						return false;
					}
					this.$refs.addOrUpdate.init(0)
				} else {
					// 修改
					if(this.dataListSelections.length > 1) {
						this.$message({
							message: '不能一次修改多个',
							type: 'warning'
						})
					} else if(this.dataListSelections.length == 0) {
						this.$message({
							message: '请选择一个微信号进行修改',
							type: 'warning'
						})
					} else {
						this.$nextTick(() => {
							this.$refs.addOrUpdate.init(this.dataListSelections[0].id)
						})
					}
				}
			},
			// 删除
			deleteHandle() {
				var ids = ''
				for(var i = 0; i < this.dataListSelections.length; i++) {
					ids += this.dataListSelections[i].id + ','
				}
				ids = ids.substr(0, ids.length - 1)
				var that = this
				console.log("ids",ids)
				this.$confirm(`确定删除吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('/cc/customer/sub/config/delete',{
						ids
					}).then(resp => {
						console.log("获取子模块数据列表==>",resp)
						if(resp.data && resp.data.code === '0'){
							that.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									that.getDataList()
								}
							})
						}else{
							that.$message.error(resp.data.message)
						}
					})
				}).catch(() => {})
			},

		}
	}
</script>
<style lang="scss">
	#el-popover-5179 {
		height: 240px！important;
	}
	
	.el-icon-question {
		font-size: 30px;
		margin-left: 60px;
		color: #409EFF;
	}
	
	.title_ls {
		width: 100%;
		height: 2px;
		border-top: 2px solid #409EFF;
		clear: both;
		margin-bottom: 20px;
	}
</style>